import React from 'react';
import { Link } from 'react-router-dom';
import PopupDialog from './PopupDialog'
import imgStandardGame from './Medias/StandardGame.png'

class StartAnimation extends React.Component {
    render() {
        return <></>;
    }
}

class GameModeCard extends React.Component<{ imgSrc: string, name: string, to: string }>{
    render() {
        return (
            <div style={{
                position: "relative",
                float: "left",
                border: "1px black solid",
                width: "300px",
                height: "400px",
                margin: "2px",
                maxWidth: "fit-content"
            }}>
                <img src={this.props.imgSrc} alt={"picture of " + this.props.name} style={{
                    width: "100%",
                    height: "90%",
                    overflow: "hidden"
                }} />
                <Link to={this.props.to} >
                    <button style={{
                        position: "absolute",
                        left: "0px",
                        bottom: "0",
                        width: "100%",
                        height: "10%"
                    }}>{this.props.name}</button>
                </Link>
            </div>);
    }
}

export default class Main extends React.Component<{}, { chooseMode: boolean }> {
    constructor(props: any) {
        super(props);
        this.state = {
            chooseMode: false
        };
    }
    render() {
        return (<>
            <GameModeCard imgSrc={imgStandardGame} name="Default" to="/default" />
            <StartAnimation />
        </>);
    }
}
